<template>
  <div class="content">
    <div class="fabricjs">
      <canvas class="fabricjsCanvas" width="500" height="500"></canvas>
    </div>
    <div class="zrender"></div>
  </div>
</template>

<script>
import { fabric } from "fabric";
import * as zrender from "zrender";

export default {
  name: "demo-event",
  mounted() {
    this.init();
  },
  methods: {
    fabricInit() {
      let el = this.$el.querySelector(".fabricjsCanvas");
      let fabricjsCanvas = new fabric.Canvas(el);
      fabricjsCanvas.selection = false; // 禁止所有选中
      fabricjsCanvas.on("selected", function(options) {
        if (!options.target) {
          return false;
        }
        console.log(options.e, "-- fabric selected options event");
      });
      fabricjsCanvas.on("mouse:down", function(options) {
        if (!options.target) {
          return false;
        }
        console.log(options.e, "-- fabric mouse:down options event");
      });
      fabricjsCanvas.on("mouse:move", function(options) {
        if (!options.target) {
          return false;
        }
        console.log(options.e, "-- fabric mouse:move options event");
      });
      fabricjsCanvas.on("mouse:up", function(options) {
        if (!options.target) {
          return false;
        }
        console.log(options.e, "-- fabric mouse:up options event");
      });

      // 添加元素
      let rect = new fabric.Rect({
        hoverCursor: 'pointer',
        top: 100,
        left: 100,
        width: 60,
        height: 70,
        fill: "red"
      });
      rect.hasControls = false; // 只能移动不能（编辑）操作
      rect.selectable = false; // 控件不能被选择
      rect.hasRotatingPoint = false; // 控制旋转点不可见
      fabricjsCanvas.add(rect);
    },
    zrenderInit() {
      let el = this.$el.querySelector(".zrender");
      let zr = zrender.init(el);

      // 添加元素
      let circle = new zrender.Circle({
        cursor: 'pointer',
        shape: {
          cx: 150,
          cy: 50,
          r: 40
        },
        style: {
          fill: "#F00",
          stroke: "#F00"
        }
      });
      circle.on("click", function(Event) {
        console.log(Event, "-- zrender click event");
      });
      circle.on("dblclick", function(Event) {
        console.log(Event, "-- zrender dblclick event");
      });
      circle.on("mousedown", function(Event) {
        console.log(Event, "-- zrender mousedown event");
      });
      circle.on("mousemove", function(Event) {
        console.log(Event, "-- zrender mousemove event");
      });
      circle.on("mouseup", function(Event) {
        console.log(Event, "-- zrender mouseup event");
      });
      circle.on("mousewheel", function(Event) {
        console.log(Event, "-- zrender mousewheel event");
      });
      circle.on("contextmenu", function(Event) {
        console.log(Event, "-- zrender contextmenu event");
      });
      zr.add(circle);
    },
    init() {
      this.fabricInit();
      this.zrenderInit();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.content {
  padding: 5px;
}
.content > div {
  display: inline-block;
  width: 48%;
  height: 500px;
  border: 1px solid #eee;
}
</style>
